<template>
  <div class="scenicdetail">
    <nav-bar class="scenicNav">
      <div slot="left" class="backButton" @click="back"><img src="@/assets/img/message/backButton.svg" alt=""></div>
      <div slot="center" class="LogoWrapper">
        <img id="fishLogo" src="~assets/img/logo/fishLogo.png" alt="游出我的范">
        <span class="mine">景点详情页</span>
      </div>
    </nav-bar>
   
      <div class="detailMain">
        <Scroll class="content">
          <h2 class="title">{{ this.region }}</h2>
          <div class="openTime">开放时间：{{ scenicObj?.openTime ? scenicObj.openTime : '-' }}</div>
          <div>
            <Carousel :images="scenicObj.images" :interval="3000"></Carousel>
          </div>
          <div class="brief">
            <span>简介:</span>
            <p>{{ scenicObj.brief }}</p>
          </div>
          <div class="policy">
            <span>政策:</span>
            <p>{{ scenicObj.policy }}</p>
          </div>
          <div class="introduce">
            <span>详情:</span>
            <p>{{ scenicObj.introduce }}</p>
          </div>
        </Scroll>
      </div>
    <div class="detailBottom" v-if="!isSelected" @click="changeSelected">添加到本次路线中</div>
    <div class="detailBottomDetele" v-if="isSelected" @click="changeSelected">从本次路线中取消该行程</div>
  </div>
</template>

<script>
 import Carousel from 'components/common/swiper/Carousel.vue';
 import NavBar from "components/common/navbar/NavBar";
 import { getScenicDetail } from "@/network/home"
import Scroll from '@/components/common/scroll/Scroll.vue';

export default {
  name: 'scenicdetail',
  components:{
      NavBar,
      Carousel,
      Scroll
  },
  data() {
    return {
      isSelected : false,
      region: this.$route.params.region,
      scenicObj:{},
    }
  },
  mounted() {
    this.getScenicData()
  },
  methods: {
    // 处理过长标题
    handleRegion(){
      const index = this.region.indexOf("市"); // 查找逗号的索引位置
      const result = this.region.substring(index + 1); 
      return result;
    },
    // 点击返回按钮回调
    back(){
      this.$router.back()
    },
    // 是否添加到本次路线中
    changeSelected() {
      this.isSelected = !this.isSelected
    },
    // 获取景点数据
    async getScenicData(){
      console.log(this.$route.params.region); 
      const {data:{data:res}} = await getScenicDetail(this.$route.params.region);
      this.scenicObj = res
    },
    imageLoad(){
      if(!this.isLoad){
        this.$emit('swiperImageLoad')
        this.isLoad = true
      }
    },
  },
}
</script>

<style scoped>
/* 回退按钮样式 */
  .scenicNav{
    background-color: #11dff1;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 9;
  }
  .LogoWrapper{
    height: 44px;
    display: flex;
    justify-content: center;
  }
  .backButton img {
      height: 20px;
      width: 20px;
      display: inline-block;
      vertical-align: middle;
  }
  .mine{
    font-size: 18px;
    color: #fff;
    margin: 2px 0 0 5px;
  }
  #fishLogo{
    height: 35px;
    margin-top: 4px;
  }

  /* 中间样式 */
  .detailMain{
    width: 100%;
    margin-top: 44px;
    overflow: hidden;
  }

  /* 滚动区域 */
.content{
    overflow: hidden;
    position: absolute;
    top: 44px;
    bottom: 49px;
    left: 0;
    right: 0;
    z-index: 999;
  }

/* 标题样式 */
  .title{
    width: 100%;
    text-align: center;
  }

  /* 开放时间样式 */
  .openTime{
    margin: 3px;
    width: 100;
    color: red;
  }

  /* 简介样式 */
  .brief{
    width: 100%;
    padding: 5px;
    font-size: 18px;
   background-color: rgb(247, 247, 118);
  }
  .brief span{
    font-weight: bold;
    margin: 10px;
  }
  .brief p{
    display: inline;
  }

  .policy{
    width: 100%;
    padding: 5px;
    color: white;
    background-color: rgb(33, 185, 76);
  }
  .policy span{
    font-weight: bold;
    margin: 10px;
  }
  .policy p{
    display: inline;
  }

  .introduce{
    width: 100%;
    padding: 5px;
    background-color: pink;
  }
  .introduce span{
    font-weight: bold;
    margin: 10px;
  }
  .introduce p{
    display: inline;
  }

/* 底部样式 */
.detailBottom {
  position: fixed;
  bottom: 0;
  height: 50px;
  width: 100%;
  text-align: center;
  font-size: large;
  padding-top: 15px;
  background-color: rgb(180, 244, 248);
}
.detailBottomDetele {
  position: fixed;
  bottom: 0;
  height: 50px;
  width: 100%;
  text-align: center;
  font-size: large;
  padding-top: 15px;
  background-color: rgb(222, 226, 226);
}
</style>